import React, { Component } from 'react';
import axios from 'axios';
import { Tooltip, Input, Icon, Form, Button, Modal, message } from 'antd';
const FormItem = Form.Item;

export default class NoteBookMenu extends Component{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>
                <BookMenuHead/>
                <div className="underline"></div>
                <BookMenuList/>
            </div>
        );
    }
}

class AddBook extends Component{
    render() {
        const { visible, onCancel, onCreate, form } = this.props;
        const { getFieldDecorator } = form;
        return (
          <Modal
            visible={visible}
            title="创建一个笔记本"
            okText="创建"
            onCancel={onCancel}
            onOk={onCreate}
          >
            <Form layout="vertical">
              <FormItem label="笔记本名称：">
                {getFieldDecorator('book_title', {
                  rules: [{ required: true, message: '请输入笔记本名称!' }],
                })(
                  <Input />
                )}
              </FormItem>
            </Form>
          </Modal>
        );
      }
}
export const AddBookForm = Form.create({})(AddBook);

class BookMenuHead extends Component{
    state = {
        visible: false,
    };
    showModal = () => {
        this.setState({ visible: true });
    }
    handleCancel = () => {
        this.setState({ visible: false });
    }
    handleCreate = () => {
        const form = this.formRef.props.form;
        form.validateFields((err, values) => {
            if (err) {
                return;
            }
            axios.get('/api/addBook', { params: { book_title: values.book_title } })
            .then(function (response) {
                if(response.data.code == 200){
                    message.success('创建成功');
                    // 新增后需要更新笔记本列表
                    PubSub.publish('add_book_info', response.data.book_info);
                }else{
                    message.error(response.data.msg);
                }
            })
            .catch(function (error) {
                console.log(error);
            });
            form.resetFields();
            this.setState({ visible: false });
        });
    }
    saveFormRef = (formRef) => {
        this.formRef = formRef;
    }
    render(){
        return (
            <div>
                <div className="book-menu-title">
                    <span>笔记本</span>
                    <Tooltip placement="bottomLeft" title="新建笔记本">
                            <i className="icon add-img" onClick={ this.showModal }></i>
                    </Tooltip>
                </div>
                <AddBookForm
                    wrappedComponentRef = {this.saveFormRef}
                    visible = {this.state.visible}
                    onCancel = {this.handleCancel}
                    onCreate = {this.handleCreate}
                />
            </div>
        );
    }
}

class BookMenuList extends Component{
    constructor(props){
        super(props);
        this.state = { books_list: [] };
    }
    componentDidMount(){
        let that = this;
        axios.get('/api/book')
            .then(function (response) {
                if(response.data.code == 200){
                    that.setState ({ books_list: response.data.book_list });
                }else{
                    //todo
                }
            })
            .catch(function (error) {
                console.log(error);
        });
        // 模糊查询笔记本标题
        this.pubsub_token = PubSub.subscribe('books_list', function (topic, message) {  
            this.setState({  
                books_list: message  
            });
        }.bind(this));  

        //新增笔记本实时更新笔记本列表
        this.add_book_token = PubSub.subscribe('add_book_info', function (topic, message) {  
            this.setState({  
                books_list: Object.assign(that.state.books_list, message)
            });
        }.bind(this)); 
    }
    render(){
        let books_list = this.state.books_list.map((data)=> (
            <div className="book-menu-list" key={ data.book_id }>
                <p className="title">{ data.book_title }</p>
                <p className="count">{ data.bijis_count ? data.bijis_count : 0}条笔记</p>
            </div>
        ));
        return (
            <div>
                <div className="book-list-title">最近笔记本</div>
                <div className="menu-list">{ books_list }</div>
            </div>
        );
    }
}